<template>
  <div class="echart-container">
    <div>
      <el-row :gutter="32" class="row-style">
        <el-col :xs="24" :sm="24" :lg="12">
          <div class="chart-wrapper">
            <bar-simple />
            <h3>课程情况</h3>
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="12">
          <div class="chart-wrapper">
            <raddar-chart />
            <h3>教学评价</h3>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="32" class="row-style">
        <el-col :xs="24" :sm="24" :lg="12">
          <div class="chart-wrapper">
            <pie-chart />
            <h3>课堂时间</h3>
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="12">
          <div class="chart-wrapper">
            <bar-chart />
            <h3>质量分布</h3>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import BarChart from "./components/BarChart";
import RaddarChart from "./components/RaddarChart";
import PieChart from "./components/PieChart";
import BarSimple from "./components/BarSimple";

export default {
  name: "ECharts",
  components: {
    BarChart,
    RaddarChart,
    PieChart,
    BarSimple,
  },
};
</script>
<style lang="scss" scoped>
.el-row {
  margin: 5px auto;
}
.echart-container {
  padding: 32px;
  background-color: #ffffff;
  position: relative;
  .row-style {
    height: 50%;
  }

  .chart-wrapper {
    background: #eee;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}
@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
